<template>
  <div>
    <div id="simpleSquare"></div>
    <div>
      <div id="simpleSquare3"></div>
    </div>

    <el-button type="text" @click="dialogVisiblea = true">选择题</el-button>
    <el-button type="text" @click="dialogVisibleb = true">填空题</el-button>
    <el-button type="text" @click="dialogVisiblec = true">简答题</el-button>
    <el-button type="text" @click="dialogVisibled = true">作文题</el-button>

    <el-dialog :visible.sync="dialogVisiblea" title="选择题">
      <el-form :model="form">
        <el-form-item label="题目名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="开始题号" :label-width="formLabelWidth">
          <el-input v-model="form.startnumber" autocomplete="off" />
        </el-form-item>
        <el-form-item label="结束题号" :label-width="formLabelWidth">
          <el-input v-model="form.endnumber" autocomplete="off" />
        </el-form-item>
        <el-form-item label="选项勾选" :label-width="formLabelWidth">
        </el-form-item>
        <el-checkbox-group v-model="checkList" @change="changeFun">
          <el-checkbox label="[A]"></el-checkbox>
          <el-checkbox label="[B]"></el-checkbox>
          <el-checkbox label="[C]"></el-checkbox>
          <el-checkbox label="[D]"></el-checkbox>
          <el-checkbox label="[E]"></el-checkbox>
          <el-checkbox label="[F]"></el-checkbox>
          <el-checkbox label="[G]"></el-checkbox>
        </el-checkbox-group>
        <el-form-item label="每题分值" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="排列方式" :label-width="formLabelWidth">
          <el-radio-group v-model="radio2" class="ml-4">
            <el-radio label="2" size="large">4x5排列</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="Draw">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="dialogVisibleb" title="填空题">
      <el-form :model="form">
        <el-form-item label="题目名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="总题数" :label-width="formLabelWidth">
          <el-input v-model="form.total" autocomplete="off" />
        </el-form-item>
        <el-form-item label="行数" :label-width="formLabelWidth">
          <el-input v-model="form.rows" autocomplete="off" />
        </el-form-item>
        <el-form-item label="每行几列" :label-width="formLabelWidth">
          <el-input v-model="cols" autocomplete="off" />
        </el-form-item>
        <el-form-item label="每题分值" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="排列方式" :label-width="formLabelWidth">
          <el-radio-group v-model="radio2" class="ml-4">
            <el-radio label="1" size="large">紧凑排列</el-radio>
            <el-radio label="2" size="large">4x5排列</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleb = false">取 消</el-button>
        <el-button type="primary" @click="DrawBlank">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="dialogVisibled" title="作文题">
      <el-form :model="form">
        <el-form-item label="题目名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="作文字数" :label-width="formLabelWidth">
          <el-input v-model="form.WordNumber" autocomplete="off" />
        </el-form-item>
        <el-form-item label="总分分值" :label-width="formLabelWidth">
          <el-input v-model="form.score" autocomplete="off" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleb = false">取 消</el-button>
        <el-button type="primary" @click="zuowen">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { SVG } from "@svgdotjs/svg.js";

export default {
  name: "HelloWorld",
  data() {
    return {
      width: 1000,
      height: 1000,
      dialogVisiblea: false,
      dialogVisibleb: false,
      dialogVisiblec: false,
      dialogVisibled: false,
      show: false,
      form: {
        name: "",
        startnumber: 1,
        endnumber: 2,
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        total: "",
        rows: "",
        WordNumber: "",
        score: "",
      },
      radio: "1",
      checkList: [],
      draw: null,
    };
  },
  computed: {
    cols() {
      return Math.ceil(this.form.total / this.form.rows);
    },
  },
  mounted() {
    this.draw = SVG().addTo("#simpleSquare").size(794, 1123);
    this.draw
      .text("班级:")
      .move(50, 900)
      .attr({ "font-weight": "bold" })
      .rotate(-90);
    this.draw.line(75, 790, 75, 890).stroke({ color: "#333", width: 1 });
    this.draw
      .text("姓名:")
      .move(40, 550)
      .attr({ "font-weight": "bold" })
      .rotate(-90);
    this.draw.line(75, 95, 75, 195).stroke({ color: "#333", width: 1 });
    this.draw
      .text("学号:")
      .move(50, 200)
      .attr({ "font-weight": "bold" })
      .rotate(-90);
    this.draw.line(90, 440, 90, 540).stroke({ color: "#333", width: 1 })

    this.draw.line(90, 50, 90, 1000).stroke({ color: "#333", width: 1,dasharray: "10" })
  },

  methods: {
    Draw() {
      this.dialogVisiblea = false;
      this.draw
        .rect(600, 800)
        .fill("#fff")
        .stroke({ color: "#333", width: 1 })
        .move(100, 200);
      this.draw.line(100, 335, 700, 335).stroke({ color: "#333", width: 1 });
      this.draw
        .text("选择题答题区")
        .move(100, 200)
        .attr({ "font-weight": "bold" });
      // 双重for循环根据this.checkList的长度来生成对应的选项
      if (this.form.endnumber <= 5) {
        for (let i = 0; i < this.checkList.length; i++) {
          if (i === 0) {
            this.draw
              .text(i + 1 + "." + this.checkList[i])
              .move(i * 30 + 100, 100);
          } else {
            if (i === 1) {
              this.draw.text(this.checkList[i]).move(i * 35 + 100, 100);
            } else {
              this.draw.text(this.checkList[i]).move(i * 30 + 100, 100);
            }
          }

          // .text(this.checkList[i])
          // .move(i * 30 + 100, 100);
          // .attr("transform", "translate(100," + (i * 50 + 50) + ")")
          // .text(this.checkList[1])
          // .attr("transform", "translate(100," + (i * 50 + 50) + ")")
          // .text(this.checkList[2])
          // .attr("transform", "translate(100," + (i * 50 + 50) + ")")
          // .text(this.checkList[3])
          // .attr("transform", "translate(100," + (i * 50 + 50) + ")")
          // .attr({ x: "70", y: "70" })
          // .attr("transform", "translate(100," + (i * 50 + 50) + ")")
          // .move(0, i * 70);
          if (i === 0) {
            for (let j = 0; j < this.form.endnumber - 1; j++) {
              this.draw
                .text(j + 2 + "." + this.checkList[0])
                .move(i * 30 + 100, j * 20 + 120);
            }
          }
          if (i === 1) {
            for (let j = 0; j < this.form.endnumber - 1; j++) {
              this.draw
                .text(this.checkList[1])
                .move(i * 35 + 100, j * 20 + 120);
            }
          }
          if (i === 2) {
            for (let j = 0; j < this.form.endnumber - 1; j++) {
              this.draw
                .text(this.checkList[2])
                .move(i * 30 + 100, j * 20 + 120);
            }
          }
          if (i === 3) {
            for (let j = 0; j < this.form.endnumber - 1; j++) {
              this.draw
                .text(this.checkList[3])
                .move(i * 30 + 100, j * 20 + 120);
            }
          }
          if (i === 4) {
            for (let j = 0; j < this.form.endnumber - 1; j++) {
              this.draw
                .text(this.checkList[4])
                .move(i * 30 + 100, j * 20 + 120);
            }
          }
          if (i === 5) {
            for (let j = 0; j < this.form.endnumber - 1; j++) {
              this.draw
                .text(this.checkList[5])
                .move(i * 30 + 100, j * 20 + 120);
            }
          }
          if (i === 6) {
            for (let j = 0; j < this.form.endnumber - 1; j++) {
              this.draw
                .text(this.checkList[6])
                .move(i * 30 + 100, j * 20 + 120);
            }
          }
        }
      }

      if (this.form.endnumber > 5 && this.form.endnumber <= 10) {
        // 第一块
        for (let i = 0; i < this.checkList.length; i++) {
          if (i === 0) {
            this.draw
              .text(i + 1 + "." + this.checkList[i])
              .move(i * 30 + 100, 230);
          } else {
            if (i === 1) {
              this.draw.text(this.checkList[i]).move(i * 35 + 100, 230);
            } else {
              this.draw.text(this.checkList[i]).move(i * 30 + 100, 230);
            }
          }

          // draw.text(this.checkList[i]).move(i * 30 + 100, 100);
          // .attr("transform", "translate(100," + (i * 50 + 50) + ")")
          // .text(this.checkList[1])
          // .attr("transform", "translate(100," + (i * 50 + 50) + ")")
          // .text(this.checkList[2])
          // .attr("transform", "translate(100," + (i * 50 + 50) + ")")
          // .text(this.checkList[3])
          // .attr("transform", "translate(100," + (i * 50 + 50) + ")")
          // .attr({ x: "70", y: "70" })
          // .attr("transform", "translate(100," + (i * 50 + 50) + ")")
          // .move(0, i * 70);
          if (i === 0) {
            for (let j = 0; j < 4; j++) {
              this.draw
                .text(j + 2 + "." + this.checkList[0])
                .move(i * 30 + 100, j * 20 + 250);
            }
          }
          if (i === 1) {
            for (let j = 0; j < 4; j++) {
              this.draw
                .text(this.checkList[1])
                .move(i * 35 + 100, j * 20 + 250);
            }
          }
          if (i === 2) {
            for (let j = 0; j < 4; j++) {
              this.draw
                .text(this.checkList[2])
                .move(i * 30 + 100, j * 20 + 250);
            }
          }
          if (i === 3) {
            for (let j = 0; j < 4; j++) {
              this.draw
                .text(this.checkList[3])
                .move(i * 30 + 100, j * 20 + 250);
            }
          }
          if (i === 4) {
            for (let j = 0; j < 4; j++) {
              this.draw
                .text(this.checkList[4])
                .move(i * 30 + 100, j * 20 + 250);
            }
          }
          if (i === 5) {
            for (let j = 0; j < 4; j++) {
              this.draw
                .text(this.checkList[5])
                .move(i * 30 + 100, j * 20 + 250);
            }
          }
          if (i === 6) {
            for (let j = 0; j < 4; j++) {
              this.draw
                .text(this.checkList[6])
                .move(i * 30 + 100, j * 20 + 250);
            }
          }
        }

        // 第二块

        for (let i = 0; i < this.checkList.length; i++) {
          if (i === 0) {
            this.draw
              .text(i + 6 + "." + this.checkList[i])
              .move(i * 30 + 250, 230);
          } else {
            if (i === 1) {
              this.draw.text(this.checkList[i]).move(i * 35 + 250, 230);
            } else {
              this.draw.text(this.checkList[i]).move(i * 30 + 250, 230);
            }
          }
          // draw.text(i + 5 + "." +this.checkList[i]).move(i * 30 + 250, 100);
          // .attr("transform", "translate(100," + (i * 50 + 50) + ")")
          // .text(this.checkList[1])
          // .attr("transform", "translate(100," + (i * 50 + 50) + ")")
          // .text(this.checkList[2])
          // .attr("transform", "translate(100," + (i * 50 + 50) + ")")
          // .text(this.checkList[3])
          // .attr("transform", "translate(100," + (i * 50 + 50) + ")")
          // .attr({ x: "70", y: "70" })
          // .attr("transform", "translate(100," + (i * 50 + 50) + ")")
          // .move(0, i * 70);
          if (i === 0) {
            for (let j = 0; j < 4; j++) {
              if (j === 3) {
                this.draw
                  .text(j + 7 + "." + this.checkList[0])
                  .move(i * 30 + 240, j * 20 + 250);
              } else {
                this.draw
                  .text(j + 7 + "." + this.checkList[0])
                  .move(i * 30 + 250, j * 20 + 250);
              }
            }
          }
          if (i === 1) {
            for (let j = 0; j < 4; j++) {
              this.draw
                .text(this.checkList[1])
                .move(i * 35 + 250, j * 20 + 250);
            }
          }
          if (i === 2) {
            for (let j = 0; j < 4; j++) {
              this.draw
                .text(this.checkList[2])
                .move(i * 30 + 250, j * 20 + 250);
            }
          }
          if (i === 3) {
            for (let j = 0; j < 4; j++) {
              this.draw
                .text(this.checkList[3])
                .move(i * 30 + 250, j * 20 + 250);
            }
          }
          if (i === 4) {
            for (let j = 0; j < 4; j++) {
              this.draw
                .text(this.checkList[4])
                .move(i * 30 + 250, j * 20 + 250);
            }
          }
          if (i === 5) {
            for (let j = 0; j < 4; j++) {
              this.draw
                .text(this.checkList[5])
                .move(i * 30 + 250, j * 20 + 250);
            }
          }
          if (i === 6) {
            for (let j = 0; j < 4; j++) {
              this.draw
                .text(this.checkList[6])
                .move(i * 30 + 250, j * 20 + 250);
            }
          }
        }
      }

      // 第三块
      // for (let i = 0; i < this.checkList.length; i++) {
      //   draw
      //     .text(this.checkList[i])
      //     .move(i * 30+500,100 )
      //     // .attr("transform", "translate(100," + (i * 50 + 50) + ")")
      //     // .text(this.checkList[1])
      //     // .attr("transform", "translate(100," + (i * 50 + 50) + ")")
      //     // .text(this.checkList[2])
      //     // .attr("transform", "translate(100," + (i * 50 + 50) + ")")
      //     // .text(this.checkList[3])
      //     // .attr("transform", "translate(100," + (i * 50 + 50) + ")")
      //     // .attr({ x: "70", y: "70" })
      //     // .attr("transform", "translate(100," + (i * 50 + 50) + ")")
      //     // .move(0, i * 70);
      //     if (i === 0) {
      //       for (let j = 0; j < 4; j++) {
      //     draw
      //       .text(this.checkList[0])
      //       .move(i*30+500, j * 20+120)

      //   }
      //     }
      //     if (i === 1) {
      //       for (let j = 0; j < 4; j++) {
      //     draw
      //       .text(this.checkList[1])
      //       .move(i*30+500, j * 20+120)
      //   }

      // }
      //     if (i === 2) {
      //       for (let j = 0; j < 4; j++) {
      //     draw
      //       .text(this.checkList[2])
      //       .move(i*30+500, j * 20+120)
      //   }

      // }
      //     if (i === 3) {
      //       for (let j = 0; j < 4; j++) {
      //     draw
      //       .text(this.checkList[3])
      //       .move(i*30+500, j * 20+120)
      //   }

      // }
      //     if (i === 4) {
      //       for (let j = 0; j < 4; j++) {
      //     draw
      //       .text(this.checkList[4])
      //       .move(i*30+500, j * 20+120)
      //   }

      // }
      //     if (i === 5) {
      //       for (let j = 0; j < 4; j++) {
      //     draw
      //       .text(this.checkList[5])
      //       .move(i*30+500, j * 20+120)
      //   }

      // }
      //     if (i === 6) {
      //       for (let j = 0; j < 4; j++) {
      //     draw
      //       .text(this.checkList[6])
      //       .move(i*30+500, j * 20+120)
      //   }

      // }

      // }
    },
    DrawBlank() {
      this.dialogVisibleb = false;
      this.draw.text("填空题").move(100, 338).attr({ "font-weight": "bold" });
      for (let index = 0; index < this.form.rows; index++) {
        this.draw.text(index + 1 + ".").move(100, 355 + index * 20);
        for (let col = 0; col < this.cols; col++) {
          this.draw
            .line(
              100 + col * 200,
              200 + index * 20,
              200 + col * 200,
              200 + index * 20
            )
            .stroke({ width: 1, color: "black" })
            .move(115 + col * 120, 368 + index * 20)
            .stroke({ width: 1, color: "black" });
        }
      }
    },
    zuowen() {
      this.dialogVisibled = false;
      for (let index = 0; index < (this.form.WordNumber / 20) * 2; index++) {
        this.draw
          .line(100, 200 + index * 20, 500, 200 + index * 20)

          .stroke({ width: 1, color: "black" });
        for (let col = 0; col < 21; col++) {
          this.draw
            .line(
              100 + col * 20,
              200 + index * 20,
              100 + col * 20,
              200 + index * 20 + 20
            )
            .stroke({ width: 1, color: "black" });
        }
      }
    },
  },
};

// for (
//   let index = 0;
//   index < this.form.endnumber - this.form.startnumber + 1;
//   index++
// ) {
//   d3.select("svg")
//     .append("text")

//     .attr("x", 280 + index * 25)

//     .style("font-size", "20px")

//     .text(() => this.checkList);
//   for (
//     let index1 = 0;
//     index1 < this.form.endnumber - this.form.startnumber + 1;
//     index1++
//   ) {
//     d3.select("svg")
//       .append("text")
//       .attr("y", 95 + index * 20)

//       .style("font-size", "20px")
//       .attr("fill", "black")
//       .text(() => this.checkList);
//   }
// }
// for (
//   let i = 0;
//   i < this.form.endnumber;
//   i++
// ) {
//   // 在SVG容器中添加一行<g>元素
//   let svg = d3.select("svg");
//   let row = svg
//     .append("g")

//     // let row =  svg.append("rect")
// //  let row = svg
// //     .append("rect")
// //     .attr("width", 100)
// //     .attr("height", 50)
// //     .attr("x", this.width / 2 - 50)
// //     .attr("y", this.height / 2 - 25)
// //     .attr("stroke","#000000")
// //     .attr("fill-opacity",0)
//     .attr("transform", "translate(" + (i * 100 + 50) + ", 100)");
//   // .attr("transform", "translate(" + (i * 100 + 50) + "," + (i * 20 + 20) + ")");

//   // .attr("transform", "translate(20," + (i * 30 + 20) + ")")
//   for (let j = 0; j < this.form.endnumber; j++) {
//     // 在每行<g>元素中添加一个文本<text>元素
//     row
//       .append("text")

//       .attr("y", 100 + j * 30)

//       .text(() => this.checkList);
//   }
</script>

<style scoped></style>
